<template>
  <div>
    <div v-if="shows == 'list'">
      <Header :type="'long'"> 会员权益-设置{{ msg.type_name }}规则 </Header>
      <Header>
        <p>
          权益类型&emsp;
          <el-button
            size="mini"
            type="text"
            @click="
              dialogVisibleXX = true;
              form.name = msg.name;
              form.authorityExplain = msg.authority_explain;
            "
          >
            编辑
          </el-button>
        </p>

        <div class="top">
          <p>权益类型：&nbsp;&nbsp;{{ msg.type_name }}</p>
          <p>权益名称：&nbsp;&nbsp;{{ msg.name }}</p>
          <p>权益说明：&nbsp;&nbsp;{{ msg.authority_explain }}</p>
        </div>
      </Header>
      <Main :data="listData" :footer-lock="totals > 10">
        <div class="list-form-title">
          <p>
            权益规则&emsp;
            <el-button size="mini" type="text" @click="gzTag('add')">
              新增权益规则
            </el-button>
          </p>
        </div>

        <el-table-column
          label="权益规则名称"
          align="center"
          property="name"
        ></el-table-column>

        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="gzTag('edit', scope.row)"
            >
              编辑
            </el-button>
            <el-button size="mini" type="text" @click="del(scope.row.rule_id)">
              删除
            </el-button>
            <el-button
              v-if="msg.type_name == '商品折扣'"
              size="mini"
              type="text"
              @click="
                shows = 'shop';
                ruleIdshop = scope.row.rule_id;
                val = scope.row.val;
              "
            >
              设置商品价格
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals" :type="'ordinary'">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
      <Footer v-if="shows == 'list'">
        <el-button plain @click="$emit('out')">返 回</el-button>
      </Footer>
    </div>
    <rules-shop
      v-if="shows == 'shop'"
      :rule-id="ruleIdshop"
      :val="val"
      @outs="outs"
    />
    <el-dialog title="编辑权益信息" :visible.sync="dialogVisibleXX" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="权益名称" prop="name">
          <el-input
            v-model="form.name"
            size="medium"
            style="line-height: 20px;"
            maxlength="5"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="权益说明" prop="authorityExplain">
          <el-input
            v-model="form.authorityExplain"
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 20 }"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          plain
          @click="
            dialogVisibleXX = false;
            form.name = '';
            form.authorityExplain = '';
          "
          >取 消</el-button
        >
        <el-button type="primary" @click.stop="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="`${tit}权益规则`"
      :visible.sync="dialogVisibleGZ"
      width="30%"
    >
      <el-form
        ref="formGz"
        :model="formGz"
        :rules="rulesGz"
        label-width="100px"
      >
        <el-form-item label="规则名称" prop="name">
          <el-input
            v-model="formGz.name"
            style="line-height: 20px;"
            size="medium"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="默认折扣" prop="val">
          <el-input-number
            v-model="formGz.val"
            style="width:100px;"
            size="medium"
            :controls="false"
            :precision="2"
            :min="1"
            :max="10"
          ></el-input-number>
          &emsp;
          <span
            v-if="msg.type_name == '商品折扣'"
            style="font-size:12px;color:#D0D0D3;"
            >折扣最多10折</span
          >
          <span v-else style="font-size:12px;color:#D0D0D3;"
            >折扣最多10折，当前折扣只适用于无折扣商品</span
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          plain
          @click="
            dialogVisibleGZ = false;
            formGz.name = '';
            formGz.val = '';
          "
          >取 消</el-button
        >
        <el-button type="primary" @click.stop="submitGZ">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  AUTHORITYLIST,
  AUTHORITYRULELIST,
  SETAUTHORITY,
  SETAUTHORITYRULE,
  DELAUTHORITYRULE
} from "../service";

export default {
  components: {
    rulesShop: () => import("./rulesShop")
  },
  props: {
    authorityId: { type: String, default: "" }
  },
  data() {
    return {
      msg: { type_name: "", name: "", authority_explain: "" },
      form: { name: "", authorityExplain: "" },
      formGz: { name: "", val: "" },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        authorityExplain: [
          { required: true, message: "请输入说明", trigger: "blur" }
        ]
      },
      rulesGz: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        val: [{ required: true, message: "请输入说明", trigger: "blur" }]
      },
      listData: [],
      totals: 0,
      pages: 1,
      dialogVisibleXX: false,
      dialogVisibleGZ: false,
      rule_id: "",
      ruleIdshop: "",
      val: "",
      tit: "添加",
      shows: "list"
    };
  },
  created() {
    this.getMsg();
    this.getList();
  },
  methods: {
    async getMsg() {
      await AUTHORITYLIST({
        page: this.pages,
        pageshow: 10,
        authority_id: this.authorityId
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.msg = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    async getList() {
      await AUTHORITYRULELIST({
        page: this.pages,
        pageshow: 10,
        authority_id: this.authorityId
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          if (data != null) {
            this.totals = data.count;
            this.listData = data.list;
          }
        } else {
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          SETAUTHORITY({
            authority_id: this.msg.authority_id,
            name: this.form.name,
            authority_explain: this.form.authority_explain,
            flag: "save"
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.$message.success(msg);
              this.dialogVisibleXX = false;
              this.getMsg();
            } else {
              this.$message.error(msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    async submitGZ() {
      await this.$refs["formGz"].validate(valid => {
        if (valid) {
          SETAUTHORITYRULE({
            authority_id: this.msg.authority_id,
            rule_id: this.rule_id,
            name: this.formGz.name,
            val: this.formGz.val,
            flag: "save"
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.$message.success(msg);
              this.dialogVisibleGZ = false;
              this.formGz.name = "";
              this.formGz.val = "";
              this.rule_id = "";
              this.getList();
            } else {
              this.$message.error(msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    gzTag(tit, e) {
      if (tit === "add") {
        this.dialogVisibleGZ = true;
        this.formGz.name = "";
        this.formGz.val = "";
        this.rule_id = "";
        this.tit = "添加";
      } else {
        this.formGz.name = e.name;
        this.formGz.val = e.val;
        this.rule_id = e.rule_id;
        this.dialogVisibleGZ = true;
        this.tit = "编辑";
      }
    },
    outs() {
      this.shows = "list";
    },
    async del(ruleId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DELAUTHORITYRULE({
            rule_id: ruleId
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
              this.$message.success(msg);
            } else {
              this.$message.error(msg);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.top {
  width: 100%;
  text-align: left;
  padding: 0 0 20px 60px;
  p {
    margin-bottom: 10px;
    font-size: 14px;
  }
}
</style>
